<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web前端开发</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        nav{
            background-color: #811ede;
        }
    </style>
</head>
<body>
     <!-- 导航条 -->
     <nav>
        <ul class="navigation">
            <li class="nav-text">
                <a href="#"><首页></a>
            </li>
            <li class="nav-text">
                <a href="#introduce">课程介绍</a>
            </li>
            <li class="nav-text">
                <a href="#catalogue">章节目录</a>
            </li>
            <li class="nav-text">
                <a href="#teacher">教师资历</a>
            </li>
        </ul>
    </nav>
    <!-- 头部 -->
    <div class="top navigation">
        <div class="pic">
            <img src="./images/web前端开发jpg.jpg" alt="">
        </div>
        <div class="text">
            <h2>web前端开发</h2>
            <p>开课时间： 2024年02月29日 ~ 2024年06月25日</p>
            <p>学时安排： 3-5小时每周</p>
            <p>授课老师：孙俏</p>
            <button><a href="https://www.bilibili.com/video/BV1kM4y127Li/?spm_id_from=333.337.search-card.all.click" target="_blank">进入课程</a></button>
        </div>    
    </div>
    <!-- 课程介绍 -->
    <div id="introduce" class="navigation">
        <h4>课程介绍</h4>
        <hr>
        <div class="content">
            <p>“Web系统”就是基于网站形式的具有一定功能的系统，例如新浪、淘宝、携程等。这些系统中以网页形式呈现给用户的部分，就是“前端”。随着Web系统的普遍应用，包括移动端APP的快速发展，“Web前端开发”已经成为近些年最为重要的技术之一，人才需求量巨大。本门课程将介绍Web系统前端开发的核心技术。
            </p>  
            <p>课程内容涵盖Web系统前端开发技术的HTML5、CSS3、JS、JQuery、Bootstrap等组成部分，其中HTML决定网页的结构，CSS决定网页的样式，JS决定网页的交互。课程采用其最新技术标准与应用。
            </p> 
            <p>  课程知识点按照难易程度，分为两个等级，支持两种不同基础的学习。例如零基础的同学，建议从“Web前端开发”概论部分开始学习，有一定基础的同学，可以直接进入HTML部分学习，从而可以有足够学时延伸到JQuery、HTML5部分。
            </p>
            <p> 课程包括知识点、知识型案例、综合案例与企业实际案例，可支持两种主线进行学习，一种是以知识点为主，循序渐进的方式；一种案例式教学，课程中所有知识点均内嵌于案例中，可以由案例快速入门，带动知识点系统学习。在第二种方式下，也可以将部分知识点作为SPOC中，课下学习的部分。</p>
        </div>
    </div>
    <!-- 章节目录 -->
    <div id="catalogue" class="navigation">
        <h4>章节目录</h4>
        <hr>
        <ul class="passage">
            <span>【第1章】 概论</span>
            <li class="L">1-1 Web前端开发概述</li>
            <li class="L">1-2 网站与网页</li>
            <li class="L">1-3 Web前端开发技术</li>
            <li class="L">扩展(动画)：浏览器如何渲染网页？服务器的作用？</li>
            <li class="L">本课程所有PPT请在这里下载</li>
            <li class="L">第1章 单元测试</li>
        </ul>
        <ul>
            <span>【第2章】 HTML基础</span>
            <li class="L">2-1 HTML概述</li>
            <li class="L">2-2 HTML文件结构</li>
            <li class="L">2-3 HTML标签(I)  h1~h6、p、br、pre、span、hr</li>
            <li class="L">Web语义化 em strong dl dt dp</li>
            <li class="L">第2章HTML基础 单元作业</li>
        </ul>
        <ul>
            <span>【第3章】 CSS样式</span>
            <li class="L">3-1 CSS概述</li>
            <li class="L">3-2 CSS添加方法</li>
            <li class="L">3-3 CSS选择器</li>
            <li class="L">3-4 CSS样式(I) 文字样式</li>
            <li class="L">第3章CSS样式 单元测验</li>
            <li class="L">第3章CSS样式 单元作业</li>
        </ul>
        <ul>
            <span>【第4章】 CSS布局与定位</span>
            <li class="L">4-1 布局与定位概述</li>
            <li class="L">4-2 盒子模型（I）</li>
            <li class="L">4-3 盒子模型（II）</li>
            <li class="L">4-4 弹性盒子布局</li>
            <li class="L">4-5  网格布局</li>
            <li class="L">第4章CSS定位与布局 单元测验</li>
        </ul>
        <ul>
            <span>【第5章】 JavaScript基础</span>
            <li class="L">5-1 概述与基础语法</li>
            <li class="L">5-2 变量</li>
            <li class="L">5-3  数据类型</li>
            <li class="L">5-4  运算符与表达式</li>
            <li class="L">5-5 分支结构</li>
            <li class="L">5-6  循环结构</li>
            <li class="L">第5章Javascript 单元作业</li>
        </ul>
    </div>
    <!-- 教师资历 -->
    <div id="teacher" class="navigation">
        <h4>教师资历</h4>
        <hr>
        <div class="box">
            <span class="photos"><img src="./images/孙俏web.png" alt=""></span>
            <span class="word">
                北京林业大学任教，教授，研究生导师。北京航空航天大学计算机学院获得计算机应用博士学位。2006年英国曼彻斯特大学访问学者。主讲《数据结构》《数字图像处理算法与应用》《java程序设计》
            </span>
        </div>

    </div>
    
    
</body>
</html>